import React, { Component } from 'react';
import logo from './eos.png';
import './App.css';
import { EOSApp } from './eos/EosApp';
import $ from 'jquery';

const eos = new EOSApp();

class App extends Component {
  constructor(props) {
    super(props);
    this.render = this.render.bind(this);
    this.getBalance = this.getBalance.bind(this);
    this.transefer = this.transefer.bind(this);
  }
  getBalance() {
    let account = $('#account').val().trim();
    console.log('account balance =', eos.getBalance(account));
    eos.getBalance(account).then(balance => {
      $('#balance').text(balance[0]);
    });

    // balance[0]

  }
  transefer() {
    let from = $('#from').val().trim();
    let to = $('#to').val().trim();
    let amount = $('#amount').val().trim();
    let memo = $('#memo').val().trim();

    eos.transefer({ from: from, to: to, amount: amount, memo: memo }).then(res => {
      console.log('transefer result:', res);
    });
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to EOS BlockChain</h1>
        </header>
        {/* <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p> */}
        <br />
        <div className="balance">
          <span >
            <input id="account" placeholder="请输入要查询的账户！"></input>
            <button onClick={this.getBalance} className='balance_btn' >查询余额</button><br />
            <p id="balance" ></p>
          </span>
          <br />
          <br />
          <div className='transefer'>
            <div className='From'> <span>From: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> <input id="from" placeholder="from"></input></div>
            <div className='To'> <span>To: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span> <input id="to" placeholder="to"></input></div>
            <div className='Amount'> <span>Amount: &nbsp;</span><input id="amount" placeholder="amount"></input> </div>
            <div className='Memo'> <span>Memo: &nbsp;&nbsp;&nbsp;&nbsp;</span><input id="memo" placeholder="mem"></input></div>
            <button onClick={this.transefer} className='transefer_btn'>转账</button>
          </div>

        </div>

      </div>
    );
  }
}

export default App;
